<template>
	<view>
		<u--form :model="form" ref="uForm" labelPosition="top">
			<u-form-item label="备注" prop="name">
				<u-input class="input" v-model="form.name" placeholder="添加备注" />
			</u-form-item>
			<u-form-item label="标签" prop="name">
				<u-input class="input" v-model="form.label" placeholder="添加标签" suffixIcon="arrow-right" suffixIconStyle=" color:
					#D8D8D8" />
			</u-form-item>
			<u-form-item label="电话" prop="name">
				<u-input class="input" v-model="form.phone" placeholder="添加电话" suffixIcon="plus"
					suffixIconStyle="color: #D8D8D8" />
			</u-form-item>
			<u-form-item label="描述" prop="name">
				<view class="upload">
					<u-input class="input" v-model="form.describle" placeholder="添加文字" />
					<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
						:maxCount="1" width="280" height="280">
						<u-icon name="photo" color="#D8D8D8" size="40"></u-icon>
						<u--text text="添加照片" color="#D8D8D8;" size="48rpx"></u--text>
					</u-upload>
				</view>
			</u-form-item>
			<u-button class="complete" type="primary" @click="complete">完成</u-button>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '郭春香',
					label: '',
					phone: '',
					describle: ''
				},
				fileList1: [],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}]
				},

			};
		}
	}
</script>

<style lang="less">
	page {
		background-color: #ffffff;
		padding: 26rpx 38rpx;
	}

	::v-deep .u-form-item__body__left__content__label {
		font-weight: 400;
		font-size: 36rpx;
		color: #999999;
	}

	::v-deep .input {
		background-color: #F5F5F5 !important;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding-top: 21rpx !important;
		padding-bottom: 21rpx !important;



		.uni-input-input {
			font-weight: 400;
			font-size: 38rpx;
			color: #3D3D3D;
		}

		.uni-input-placeholder {
			font-weight: 400;
			font-size: 38rpx;
			color: #D8D8D8;
		}
	}

	.upload {
		width: 100%;

		.input {
			margin-bottom: 20rpx;
		}

		.u-upload {
			width: 280rpx;
			height: 280rpx;
			background-color: #F5F5F5;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			::v-deep .u-upload__wrap {
				align-content: center;
				justify-content: center;

				.u-icon {
					justify-content: center;
				}
			}
		}
	}

	.complete {
		width: 686rpx;
		height: 92rpx;
		background-color: #429CFD;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-top: 70rpx;

		&:after {
			content: none;
		}
	}
</style>